{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/select2/dist/css/select2.min.css' %}">
{% endblock %}

{% block content %}
    <div class="box box-default">
        <div class="box-body">
            <form role="form" id="runModule">
                {% csrf_token %}
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="hostGroup">选择主机组</label>
                        <select class="form-control select2" multiple="multiple" style="width: 100%;" id="hostGroup"
                                name="hostGroup" data-placeholder="可选择多个" onchange="groupSelect()">
                            {% for ans_group in inventory %}
                                <option value="{{ ans_group.id }}">{{ ans_group.ans_group_name }}</option>
                            {% endfor %}
                            <option value="all">所有主机</option>
                            <option value="custom">自定义主机</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="ans_group_hosts">选择主机</label>
                        <select class="form-control select2" multiple="multiple" style="width: 100%;"
                                name="ans_group_hosts" id="ans_group_hosts">

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="ansibleModule">选择模块</label>
                        <select class="form-control select2" style="width: 100%;" name="ansibleModule"
                                onchange="moduleSelect()" id="ansibleModule">
                            <option selected="selected" value="shell">shell</option>
                            <option value="ping">ping</option>
                            <option value="yum">yum</option>
                            <option value="copy">copy</option>
                            <option value="service">service</option>
                            <option value="file">file</option>
                            <option value="cron">cron</option>
                            <option value="wget">wget</option>
                            <option value="synchronize">synchronize</option>
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    <div class="form-group" style="display:none;" id="customModule">
                        <label for="customModule">自定义模块</label>
                        <input type="text" class="form-control" placeholder="Enter model"
                               name="customModule" id="c_module">
                    </div>
                    <div class="form-group">
                        <label for="ansibleModuleArgs">模块参数</label>
                        <input type="text" class="form-control" id="ansibleModuleArgs" value="uptime"
                               name="ansibleModuleArgs">
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-primary" onclick="runModule()">执行</button>
                    </div>
                    <!-- /.form-group -->
                </div>
                <!-- /.col -->
            </form>
        </div>
        <!-- /.box-body -->

    </div>

    <div class="box-footer">
        <pre style="background-color: #0c0c0c"></pre>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'AdminLTE/bower_components/select2/dist/js/select2.full.min.js' %}"></script>
    <script>
        $(function () {
            $('.select2').select2({
                allowClear: true
            });

            Pace.options.ajax.trackWebSockets = false;
        });

        function groupSelect() {
            let hosts_obj = $('#ans_group_hosts');
            let hostGroups = $('#hostGroup');
            hosts_obj.html('');
            if (hostGroups.val()[0] === 'custom') {
                {% for host in hosts %}
                    hosts_obj.append(
                        '<option value={{ host.id }}>{{ host.assets.asset_management_ip }}</option>'
                    );
                {% endfor %}
            } else if (hostGroups.val()[0] === 'all') {
                {% for host in hosts %}
                    hosts_obj.append(
                        '<option value={{ host.id }} selected>{{ host.assets.asset_management_ip }}</option>'
                    );
                {% endfor %}
            } else {
                $.ajax({
                    url: '{% url 'get_inventory_hosts' %}',
                    type: 'GET',
                    data: hostGroups.serialize(),
                    success: function (res) {
                        let hosts = res.hosts;
                        hosts_obj.val('').trigger('change');
                        for (let i = 0; i < hosts.length; i++) {
                            hosts_obj.append(`<option value=${hosts[i].host_id} selected>${hosts[i].host_ip}</option>`);
                        }
                    }
                })
            }
        }

        function moduleSelect() {
            let value = $('#ansibleModule').val();
            if (value === "shell") {
                $('#ansibleModuleArgs').val("uptime");
                $('#customModule').css('display', 'none');
            }
            else if (value === "yum") {
                $('#ansibleModuleArgs').val("name=httpd state=present");
                $('#customModule').css('display', 'none');
            }
            else if (value === "service") {
                $('#ansibleModuleArgs').val("name=httpd state=restarted enabled=yes");
                $('#customModule').css('display', 'none');
            }
            else if (value === "cron") {
                $('#ansibleModuleArgs').val('name="sync time" minute=*/3 hour=* day=* month=* weekday=* job="/usr/sbin/ntpdate window.time.com"');
                $('#customModule').css('display', 'none');
            }
            else if (value === "file") {
                $('#ansibleModuleArgs').val("src=/root/test.txt dest=/tmp/test.txt owner=root group=root mode=700 state=touch");
                $('#customModule').css('display', 'none');
            }
            else if (value === "copy") {
                $('#ansibleModuleArgs').val("src=/root/test.txt dest=/tmp/test.txt");
                $('#customModule').css('display', 'none');
            }
            else if (value === "synchronize") {
                $('#ansibleModuleArgs').val('src=/root/a dest=/tmp/ compress=yes rsync_opts="--exclude=.git --exclude=static/image"');
                $('#customModule').css('display', 'none');
            }
            else if (value === "wget") {
                $('#ansibleModuleArgs').val("url=http://url/test.tar.gz dest=/tmp");
                $('#customModule').css('display', 'none');
            }
            else if (value === "custom") {
                $('#customModule').css('display', 'block');
                $('#ansibleModuleArgs').val("");
            }
            else if (value === "ping") {
                $('#ansibleModuleArgs').val("");
                $('#customModule').css('display', 'none');
            }
            else {
                $('#ansibleModuleArgs').val("");
            }
        }

        function runModule() {
            let data = {
                hostGroup: $('#hostGroup').val(),
                ans_group_hosts: $('#ans_group_hosts').val(),
                ansibleModule: $('#ansibleModule').val(),
                customModule: $('#c_module').val(),
                ansibleModuleArgs: $('#ansibleModuleArgs').val(),
                run_user: '{{ request.user.id }}',
                remote_ip: '{{ remote_ip }}'
            };
            let ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
            let socket = new WebSocket(ws_scheme + '://' + window.location.host + "/ws/ans_module_log/");
            let obj = $('pre');

            socket.onopen = function () {
                obj.html('开始执行....\n');
                socket.send(JSON.stringify(data));
            };

            socket.onmessage = function (e) {
                obj.append(e.data)
            };

            socket.onclose = function () {
                obj.append('\n<code>执行完毕....</code>')
            }
        }
    </script>
{% endblock %}
